<template>
    <!--销售额折线图-->
    <el-card v-loading.body="isLoading" id="saleChart" class="box-card">
        销售额折线图
    </el-card>
</template>

<script>
    export default {
        name: "SaleChart",
        data(){
            return {
                isLoading:true
            }
        },
        methods:{
            initChart(xData,realData){
                let myChart =
                    this.$echarts.init(document.getElementById('saleChart'));
                myChart.setOption({
                    xAxis: {
                        data: xData
                    },
                    yAxis: {},
                    series: [
                        {
                            data: realData,
                            type: 'line',
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    fontSize: 20
                                }
                            },
                          color:'#ee6666'
                        }
                    ],
                    title: {
                        text: '近10条营业额',
                        subtext:"单位/元",
                        subtextStyle:{
                            fontSize: 18,
                            color:'rgba(0, 0, 0, 1)'
                        }
                    }
                });
                this.isLoading=false;
            },
           async getOrderManageData(){
              const{data:res}=await this.$http.get("/order/orderManageData/10");
              if (res.status===200){
                  let xData=[];
                  let realData=[]
                  let data=res.data
                  data.forEach(orderManageData=>{
                      xData.push(orderManageData.name);
                      realData.push(orderManageData.value)
                  })

                  this.initChart(xData,realData)
              }
            }
        },mounted() {
            this.getOrderManageData()
        }
    }
</script>

<style scoped>
    .box-card{
        width: 100%;
        height: 300px;
    }
</style>
